<template>
	<view class="add-merchant">
		<u-sticky>
			<view class="btn-pot" @click="addNewAptitude">
				<u-button icon="plus" text="添加新资质"></u-button>
			</view>
		</u-sticky>
		<view class="merchant" v-for="(item,index) in qualificationList" :key="index" @click="applyMerchant(item)">
			<view class="u-flex">
				<u--image :showLoading="true" :src="`${baseStaticFileUrl}/image/pages-merchant/person.png`"
					width="36rpx" height="36rpx"></u--image>
				<text class="name">{{item.name}}</text>
				<view class="details">
					<view class="see">申请新商户</view>
					<view class="icon-center">
						<u-icon name="arrow-right" color="rgb(0, 0, 0, 0.7)" size="28rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="time-style"><text>{{$date.dateFormatYMDHMS(item.createTime)}}</text></view>
		</view>
		<view v-if="qualificationList.length <= 0">
			<u-empty marginTop="180" text="暂无商户" mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<u-loadmore v-else :status="status" height="80rpx" :line="true"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				qualificationList: [],
				status: 'loadmore',
				params: {
					pageNum: 1,
					pageSize: 10,
				},
			}
		},
		onPullDownRefresh() {
			this.overloadData('refresh');
		},
		onShow() {
			this.qualificationList = [];
			this.params.pageNum = 1;
			this.findQualificationListByUserId();
		},
		methods: {
			addNewAptitude(){
				let userInfo = this.$store.getters.GET_VALUE("GET_USER_INFO");
				if (!userInfo.username && !userInfo.mobile) {
					uni.navigateTo({
						url: '/pages/complete-user-info/complete-user-info?type=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages-qualification/add/settlement-type'
					})
				}
			},
			// 重新刷数据
			overloadData(type) {
				this.params.pageNum = 1;
				this.qualificationList = [];
				this.findQualificationListByUserId(type);
			},
			findQualificationListByUserId(type) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$api('qualification.findQualificationListByUserId', this.params).then(res => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					if (res.status == 0) {
						this.loadingType = res.data.list.length === 10 ? 'more' : 'nomore';
						this.qualificationList = [...this.qualificationList, ...res.data.list]; //合并数组
						console.log(this.qualificationList)
					}
					uni.hideLoading();
				}).catch(() => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
				});
			},
			//申请商户
			applyMerchant(item) {
				uni.navigateTo({
					url: '/pages-merchant/apply-channel/apply-channel?qualification=' + encodeURIComponent(JSON.stringify(item)),
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uicon-plus {
		font-size: $f-sm !important;
		color: rgb(96,114,255) !important;
	}

	/deep/ .u-button__text {
		color: rgb(96,114,255);
		font-size: $f-sm;
		letter-spacing: 0.26rpx;
	}

	/deep/ .u-button--info.u-button--normal {
		width: 702rpx;
		height: 88rpx;
		border: 1rpx solid rgb(221, 221, 221);
		border-radius: 10rpx;
	}

	.add-merchant {
		padding-bottom: 60rpx;

		.btn-pot {
			background-color: #fff;
			padding: 30rpx 0rpx;
		}

		.merchant {
			background-color: white;
			box-sizing: border-box;
			margin: 20rpx 24rpx;
			border-radius: 20rpx;
			padding: 35rpx 28rpx;

			.details {
				display: flex;

				.see {
					color: rgba(0, 0, 0, 0.8);
					font-size: $f-sm;
				}

				.icon-center {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.name {
				flex: 1;
				padding-left: 20rpx;
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.9);
			}

			.time-style {
				margin-top: 25rpx;
				color: rgba(0, 0, 0, 0.8);
				font-size: $f-sm;
				letter-spacing: 0.26rpx;
			}
		}
	}
</style>
